var page = 1
function v() {
    var a;
    a = new XMLHttpRequest();
    a.onreadystatechange=function() {
        if (a.readyState==4 && a.status==200) {
            var json = JSON.parse(a.responseText);
            for(let i = 0 ; i < json.shop.length;i++){
                console.log(json.shop[i]);

                /*创建img左边*/
                var divImg = document.createElement("div");
                divImg.className = "img";
                var img = document.createElement("img");
                img.src = json.shop[i].ipc;
                divImg.appendChild(img);
                console.log(divImg);


                /*创建右边*/
                var divText = document.createElement("div");
                divText.className = "info";
                /*创建h4*/
                var h4 = document.createElement("h4");
                h4.innerHTML = json.shop[i].h4;

                /*创建p标签*/
                var pL = document.createElement("p");
                pL.className = "title";
                pL.innerHTML = json.shop[i].title
                /*创建进度条*/
                var divPos = document.createElement("div");
                divPos.className = "progress";
                var div_bar = document.createElement("div");
                div_bar.className = "progress-bar";

                divPos.appendChild(div_bar);

                /*创建抢购进度*/
                var divDesc = document.createElement("div");
                divDesc.className = "desc";
                var spanPer = document.createElement("span");
                spanPer.className = "percentage";
                spanPer.innerHTML = json.shop[i].bai;
                var spanLetter = document.createElement("span");
                spanLetter.className = "letter";
                spanLetter.innerHTML = json.shop[i].i;

                divDesc.appendChild(spanPer);
                divDesc.appendChild(spanLetter);

                /*创建售价和原价*/
                var divExtra = document.createElement("div");
                divExtra.className = "extra";
                var spanyan = document.createElement("span");
                spanyan.className = "yan";
                spanyan.innerHTML = "￥";
                var spancur = document.createElement("span");
                spancur.className = "cur";
                spancur.innerHTML = json.shop[i].cur;
                var spanprice = document.createElement("span");
                spanprice.className = "price";
                spanprice.innerHTML = json.shop[i].price;

                divExtra.appendChild(spanyan);
                divExtra.appendChild(spancur);
                divExtra.appendChild(spanprice);


                divText.appendChild(h4);
                divText.appendChild(pL);
                divText.appendChild(divPos);
                divText.appendChild(divDesc);
                divText.appendChild(divExtra);

                /*创建a*/
                var ab = document.createElement("a");

                ab.appendChild(divImg);
                ab.appendChild(divText);
                /*创建li*/
                var lie = document.createElement("li");
                lie.appendChild(ab);

                document.querySelector("#ul").appendChild(lie);
            }

        }
    };
    a.open("GET",page +".json",true);
    a.send();
}
v();

document.querySelector("#btn").addEventListener("click",function (){
    if(page >= 4){
        page = 1
    }else {
        page++;
    }
    document.querySelector("#ul").innerHTML = "";
    v();
});